<!DOCTYPE html>
<html lang="en">
<head>
    <title>vr no box example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            margin: 0px;
            overflow: hidden;
        }
        #example {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div id="example"></div>

<script src="../build/three.js"></script>
<script src="./js/controls/OrbitControls.js"></script>
<script src="../build/mxreality.js"></script>

<script>
    var scene, renderer,container;
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.shadowMap.enabled=true;
    container = document.getElementById('example');
    container.appendChild(renderer.domElement);


    scene = new THREE.Scene();
    vr=new VR(scene,renderer,container,'',{'y':80});
    vr.init(function () {
        
    });

    light = new THREE.DirectionalLight(0xffffff, 1);//设置平行光源
    light.position.set( 400, 400, 200 );//设置光源向量
    light.shadow.camera.zoom=4;
    light.castShadow=true;
    light.shadow.camera.near=0.001;
    light.shadow.camera.far=1500;
    light.shadow.camera.left=1000;
    light.shadow.camera.right=1000;
    light.shadow.camera.top=1000;
    light.shadow.camera.bottom=1000;
    scene.add( light );

    var texture = THREE.ImageUtils.loadTexture(
        'textures/checker.png'
    );
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.repeat = new THREE.Vector2(50, 50);
    texture.anisotropy = renderer.getMaxAnisotropy();
    var material = new THREE.MeshLambertMaterial({map:texture});
    var geometry = new THREE.PlaneGeometry(1000, 1000);
    var mesh = new THREE.Mesh(geometry, material);
    mesh.rotation.x = -Math.PI / 2;
    mesh.receiveShadow=true;
    mesh.castShadow=true;
    scene.add(mesh);

    var geometryEarth = new THREE.SphereGeometry( 50, 60, 40 );
    var materialEarth = new THREE.MeshLambertMaterial( {
        map: new THREE.TextureLoader().load( 'textures/land_ocean_ice_cloud_2048.jpg' )
    } );
    meshEarth = new THREE.Mesh( geometryEarth, materialEarth );
    meshEarth.position.set(0,50,300);
    meshEarth.castShadow=true;
    scene.add( meshEarth );

    var textureCube = new THREE.TextureLoader().load( 'textures/crate.gif' );
    var geometryCube = new THREE.BoxBufferGeometry( 50, 50, 50 );
    var materialCube = new THREE.MeshBasicMaterial( { map: textureCube } );
    meshCube = new THREE.Mesh( geometryCube, materialCube );
    meshCube.position.z=-400;
    meshCube.position.y=50;
    meshCube.castShadow=true;
    scene.add( meshCube );

    function animate() {
        requestAnimationFrame(animate);
        meshEarth.rotation.y +=0.01;

        meshCube.rotation.x += 0.005;
        meshCube.rotation.y += 0.01;

    }
    animate();

</script>
</body>
</html>
